// ** React Imports
import { useContext } from 'react'

import { Cpu, Server, Activity } from 'react-feather'

// ** Custom Components
import Avatar from '@components/avatar'
import AvatarGroup from '@components/avatar-group'

// ** Utils
import { kFormatter } from '@utils'

// ** Context
import { ThemeColors } from '@src/utility/context/ThemeColors'

// ** Reactstrap Imports
import { Row, Col, Button } from 'reactstrap'

import StatsHorizontal from '@components/widgets/stats/StatsHorizontal'
import DealAnalysis from './dealAnalysis'
import WarningAnalysis from './warningAnalysis'

// ** Images
import jsonImg from '@src/assets/images/icons/json.png'

// ** Avatar Imports
import avatar6 from '@src/assets/images/portrait/small/avatar-s-6.jpg'
import avatar7 from '@src/assets/images/portrait/small/avatar-s-7.jpg'
import avatar8 from '@src/assets/images/portrait/small/avatar-s-8.jpg'
import avatar9 from '@src/assets/images/portrait/small/avatar-s-9.jpg'
import avatar20 from '@src/assets/images/portrait/small/avatar-s-20.jpg'

// ** Styles
import '@styles/react/libs/charts/apex-charts.scss'
import '@styles/react/libs/flatpickr/flatpickr.scss'
import '@styles/react/libs/charts/recharts.scss'

const AnalyticsDashboard = () => {
  // ** Context
  const { colors } = useContext(ThemeColors)

  // ** Vars
  const avatarGroupArr = [
    {
      imgWidth: 33,
      imgHeight: 33,
      title: 'Billy Hopkins',
      placement: 'bottom',
      img: avatar9,
    },
    {
      imgWidth: 33,
      imgHeight: 33,
      title: 'Amy Carson',
      placement: 'bottom',
      img: avatar6,
    },
    {
      imgWidth: 33,
      imgHeight: 33,
      title: 'Brandon Miles',
      placement: 'bottom',
      img: avatar8,
    },
    {
      imgWidth: 33,
      imgHeight: 33,
      title: 'Daisy Weber',
      placement: 'bottom',
      img: avatar7,
    },
    {
      imgWidth: 33,
      imgHeight: 33,
      title: 'Jenny Looper',
      placement: 'bottom',
      img: avatar20,
    },
  ]
  const data = [
    {
      title: '12 Invoices have been paid',
      content: 'Invoices have been paid to the company.',
      meta: '',
      metaClassName: 'me-1',
      customContent: (
        <div className="d-flex align-items-center">
          <img className="me-1" src={jsonImg} alt="data.json" height="23" />
          <span>data.json</span>
        </div>
      ),
    },
    {
      title: 'Client Meeting',
      content: 'Project meeting with john @10:15am.',
      meta: '',
      metaClassName: 'me-1',
      color: 'warning',
      customContent: (
        <div className="d-flex align-items-center">
          <Avatar img={avatar9} />
          <div className="ms-50">
            <h6 className="mb-0">John Doe (Client)</h6>
            <span>CEO of Infibeam</span>
          </div>
        </div>
      ),
    },
    {
      title: 'Create a new project for client',
      content: 'Add files to new design folder',
      color: 'info',
      meta: '',
      metaClassName: 'me-1',
      customContent: <AvatarGroup data={avatarGroupArr} />,
    },
    {
      title: 'Create a new project for client',
      content: 'Add files to new design folder',
      color: 'danger',
      meta: '',
      metaClassName: 'me-1',
    },
  ]

  return (
    <div id="dashboard-analytics">
      <Row>
        {/* Stats With Icons Horizontal */}
        <Col lg="3" sm="6">
          <StatsHorizontal
            icon={<Cpu size={21} />}
            color="primary"
            stats="4"
            statTitle="今日待处理"
          />
        </Col>
        <Col lg="3" sm="6">
          <StatsHorizontal
            icon={<Server size={21} />}
            color="success"
            stats="12"
            statTitle="今日已处理"
          />
        </Col>
        <Col lg="3" sm="6">
          <StatsHorizontal
            icon={<Activity size={21} />}
            color="danger"
            stats="0"
            statTitle="报警通知"
          />
        </Col>
        <Col lg="3" sm="6">
          <StatsHorizontal
            button={
              <Button size="sm" color="primary">
                去发布
              </Button>
            }
            color="warning"
            stats="13"
            statTitle="已发布事务"
          />
        </Col>
        {/* Stats With Icons Horizontal */}
      </Row>
      <Row className="match-height">
        <Col sm="12">
          <DealAnalysis primary={colors.primary.main}></DealAnalysis>
        </Col>
      </Row>
      <Row className="match-height">
        <Col sm="12">
          <WarningAnalysis warning={colors.warning.main} />
        </Col>
      </Row>
    </div>
  )
}

export default AnalyticsDashboard
